<template>
	<view class="detial">
		<view class="title">
			{{item.title}}
		</view>
		<view class="info">
			  <view class="author">
			  	编辑：{{item.author}}
			  </view>
			  <view class="time">
			  	发布日期：{{item.posttime}}
			  </view>
		</view>
		<view class="content">
			<rich-text :nodes="item.content"></rich-text>
		</view>
		<view class="description">
			声明：本站的内容均采集与腾讯新闻，如果侵权请联系管理（513894357@qq.com）进行整改删除，本站进行了内容采集不代表本站及作者观点，若有侵犯请及时联系管理员，谢谢您的支持。
		</view>
	</view>
</template>

<script>
	import {parseTime} from '../../utils/tool.js'
	export default {
		data() {
			return {
				options:{},
				item:{}
			};
		},
		onLoad(e){
			this.options=e
			this.getDetailData()
		},
		methods:{
			getDetailData(){
				uni.showLoading({
					title:'数据加载中',
					mask:true
				})
				uni.request({
					url:'https://ku.qingnian8.com/dataApi/news/detail.php',
					data:this.options,
					success:(res)=>{
						if(res.statusCode==200){
							// console.log(res)
							res.data.content=res.data.content.replace(/<img/gi,'<img style="max-width:100%"')	
							res.data.posttime=parseTime(res.data.posttime,'{y}-{m}-{d}')
							this.item=res.data
							uni.setNavigationBarTitle({
								title:this.item.title
							})
							this.saveHistory()
						}else{
							uni.showToast({
								title:'数据异常',
								mask:true,
								icon:'error'
							})
						}
					},
					complete:()=>{
						uni.hideLoading()
					}
				})
			},
			saveHistory(){
				let historyArr=uni.getStorageSync("historyArr") || []
				let item={
					id:this.item.id,
					classid:this.item.classid,
					picurl:this.item.picurl,
					title:this.item.title,
					looktime:parseTime(Date.now())
				}
			let index=historyArr.findIndex(i=>{
				return i.id==this.item.id
			})
			
			if(index>=0){
				historyArr.splice(index,1)
			}
							
			historyArr.unshift(item)	
			historyArr=historyArr.slice(0,10)	
				uni.setStorageSync("historyArr",historyArr)
			}
		}
	}
</script>

<style lang="scss" scoped>
   .detial{
	   padding: 30rpx;
	   .title{
	   	font-size: 46rpx;
	   	color:#333;
	   }
	   .info{
	   	background: #F6F6F6;
	   	padding:20rpx;
	   	font-size: 25rpx;
	   	color:#666;
	   	display: flex;
	   	justify-content: space-between;
	   	margin:40rpx 0;
	   }
	   .content{
	   	padding-bottom:50rpx;	
		// 以下只支持H5
			// /deep/ img{
			// 	max-width: 100%;
			// }
	   }
	   .description{
	   	background: #FEF0F0;
	   	font-size: 26rpx;
	   	padding:20rpx;
	   	color:#F89898;
	   	line-height: 1.8em;
	   }
	   
   }
</style>
